<script>
import {defineComponent} from 'vue'

export default defineComponent({
  name: "hello",
  data(){
    return {
      count:16,
      html:'<p style="color:red">123</p>',
      list:['1','666',345,4444,798,745]
    }
  },
  methods:{
    add(){
      this.count += 1;
    },
    multi(value){
      return value *2;
    }
  },
  computed:{
    multiCount(){
      return this.count * 2;
    }
  }
})
</script>

<template>
  <button v-on:click="add">+1</button>
  <button @click="add">-1</button>
  <br>
  <input type="number" v-bind:value="count" />
  <input type="number" :value="count" />
  <br>
  <input type="number" v-model="count" />
  <br>
  <slot name="header">
    <h1>Hello Vue.js</h1>
  </slot>
  <br>
  <slot name="default">
    <span>123</span>
  </slot>
  <br>
  <slot name="footer" :c="count" :list="list">
    <p style="color:blue;background-color: gray">qqq {{ count }}</p>
  </slot>
  <br>
  <span v-text="count"></span>
  <br>
  <span>{{ multiCount }}</span>
  <br>
  <span>{{ html }}</span>
  <span v-html="html"></span>

  <h2 v-for="(item,index) in list" :key="index">
    {{ multi(item) }}
    <span v-if="index==2">-</span>
    <span v-else-if="index==0">+</span>
    <span v-else>*</span>
    <span :class="{red:!(index%2),blue:index%2}"> {{ multi(item) }} </span>
    <span :style="{color:index%2?'blue':'red',backgroundColor:'#a0a0b1'}"> {{ multi(item) }} </span>
  </h2>
</template>

<style scoped>
.red {
  color: red;
}
.blue {
  color: blue;
}
</style>